<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="en">
<head>
    <base href="${pageContext.request.contextPath}/">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>四川工商学院失物招领系统后台管理</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css" >
    <script src="../static/js/jquery-2.1.1.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/sweetalert.min.js"></script>
    <script src="../static/js/echarts.common.min.js"></script>
    <link rel="stylesheet/less" type="text/css" href="../static/css/bk.style.less" >
    <script src="../static/js/less.min.js" type="text/javascript"></script>
</head>
<body>
<div class="bk-container">
    <div class="bk-left">
        <ul class="bk-left-ul">
            <li class="active"><span class="glyphicon glyphicon-home"></span><a href="javascript:void(0)">概述</a></li>
            <li><span class="glyphicon glyphicon-zoom-in"></span><a href="javascript:void(0)">寻物启事</a></li>
            <li><span class="glyphicon glyphicon-comment"></span><a href="javascript:void(0)">招领启事</a></li>
        </ul>
    </div>
    <div class="bk-top">
        <h4 class="title">四川工商学院失物招领系统后台管理<span>1.0</span></h4>
        <div class="info">
            <span>尊敬的系统管理员，您好！</span>
            <span class="logout" id="logout"><span class="glyphicon glyphicon-log-in" style="padding-right: 8px"></span>注销</span>
        </div>
    </div>
    <div class="bk-content">
        <div id="echart" >
            <div id="echart1"></div>
            <div id="echart2"></div>
            <div id="echart3"></div>
            <div id="echart4"></div>
        </div>
    </div>
</div>
<script>
    $('.bk-left-ul li').click(function () {
        switch ($(this).text()) {
            case '概述':{
                window.location.href="/bg/index";
            }break;
            case '寻物启事':{
                window.location.href="/bg/queryAll0";
            }break;
            case '招领启事':{
                window.location.href="/bg/queryAll1";
            }break;
            default:break;
        }
    });
    $('#logout').click(function () {
        window.location.href="bg/logOut";
    });
    echart1();
    echart2();
    echart3();
    echart4();
    function echart1() {
        let myChart = echarts.init(document.getElementById('echart1'));
        let option = {
            color: ['#C23531'],
            title: {
                text: '寻物启事发布趋势图',
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['七天前','六天前','五天前','四天前','三天前','二天前','一天前'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'发布数量',
                    type:'bar',
                    barWidth: '60%',
                    data:[21, 18, 10, 22, 27, 21, 12]
                }
            ]
        };

        myChart.setOption(option);
        window.addEventListener('resize',function(){
            myChart.resize();
        });
    }
    function echart2() {
        let myChart = echarts.init(document.getElementById('echart2'));

        let option = {
            color: ['#61A0A8'],
            title: {
                text: '招领启事发布趋势图',
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['七天前','六天前','五天前','四天前','三天前','二天前','一天前'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'发布数量',
                    type:'bar',
                    barWidth: '60%',
                    data:[10, 31, 22, 19, 21, 9, 16]
                }
            ]
        };

        myChart.setOption(option);
        window.addEventListener('resize',function(){
            myChart.resize();
        });
    }
    function echart3() {
        let myChart = echarts.init(document.getElementById('echart3'));

        let option = {
            title : {
                text: '遗失物品总数图'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            series : [
                {
                    name:'总数量',
                    type:'pie',
                    radius : [30, 110],
                    roseType : 'area',
                    data:[
                        {value:10, name:'卡'},
                        {value:5, name:'钥匙'},
                        {value:15, name:'钱包'},
                        {value:25, name:'U盘'},
                        {value:20, name:'书籍'},
                        {value:35, name:'生活用品'},
                        {value:30, name:'电子设备'},
                        {value:40, name:'服饰衣帽'},
                        {value:21, name:'其他'}
                    ]
                }
            ]
        };


        myChart.setOption(option);
        window.addEventListener('resize',function(){
            myChart.resize();
        });
    }
    function echart4() {
        let myChart = echarts.init(document.getElementById('echart4'));

        let option = {
            title : {
                text: '启事状态图'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            series: [
                {
                    name:'总数量',
                    type:'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],

                    label: {
                        normal: {
                            position: 'inner'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:119, name:'寻物'},
                        {value:64, name:'招领'}
                    ]
                },
                {
                    name:'总数量',
                    type:'pie',
                    radius: ['40%', '55%'],
                    label: {
                        normal: {
                            formatter: '  {b|{b}：}{c}  {per|{d}%}  ',
                            backgroundColor: '#eee',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                a: {
                                    color: '#999',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                hr: {
                                    borderColor: '#aaa',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                b: {
                                    lineHeight: 30
                                },
                                per: {
                                    color: '#eee',
                                    backgroundColor: '#334455',
                                    padding: [2, 4],
                                    borderRadius: 2
                                }
                            }
                        }
                    },
                    data:[
                        {value:31, name:'寻物成功'},
                        {value:76, name:'寻物中'},
                        {value:12, name:'寻物失败'},
                        {value:12, name:'招领成功'},
                        {value:44, name:'招领中'},
                        {value:8, name:'招领失败'}
                    ]
                }
            ]
        };

        myChart.setOption(option);
        window.addEventListener('resize',function(){
            myChart.resize();
        });
    }
</script>
</body>
</html>
